<template>
	<view class="mine-page">
		<view class="header-msg">
			<!-- <u-avatar  size="100"></u-avatar> -->
			<image :src="avatar" class="img"></image>
			<view class="patient-msg">
				<view class="setting" @click="onsetting">
					<u-icon name="setting" color="#2979ff" size="28"></u-icon>
					设置
				</view>
				<view class="nickname" @click="onlogin">{{username}}</view>
				<view class="patient-manage">
					<text> </text>
					<text class="pantient-icon"></text>
				</view>
			</view>
		</view>

		<view class="mine-order">
			<view class="order">
				<view>我的订单</view>
				<view>查看全部 > </view>
			</view>
			<view class="order-wrap f-row">
				<view class="guahao all">
					<image class="order-img" :src="guahaoicon"></image>
					<text class="grid-text">挂号记录</text>

				</view>
				<view class="zixun all" @click="onpatient">
					<image class="order-img " :src="zixunicon"></image>
					<text class="grid-text">就诊人管理 </text>
				</view>
			</view>
		</view>
	
	</view>

</template>

<script setup>
	import { showToast } from 'vant';
	import { ref, defineAsyncComponent } from 'vue'
	import {user} from '../../pinia/user.js'
	const User = user()
	import api from '../../lib/request';
	
	console.log(User.userMsg)
	
	let avatar = User.userMsg.avatar ? User.userMsg.avatar : ref('../../static/mineimg/默认头像1.png')
	let username = User.userMsg.username ? User.userMsg.username  : ref('去登录')
	
	let guahaoicon = ref('../../static/mineimg/挂号.png')
	let zixunicon = ref('../../static/mineimg/咨询记录.png')
	let token = uni.getStorageSync('token')
	
	// 点击设置
	function onsetting(){
		uni.navigateTo({
			url:'/views/setting/setting'
		})
	}
	
	// 就诊人管理
	 const onpatient = ()=>{
		 if(!token){return showToast('登录后查看')}
		 uni.navigateTo({
		 	url:"/views/allpatient/allpatient"
		 })
	 }
	
	// 未登录,去登录
	function onlogin(){
		if(token){return}
		uni.navigateTo({
			url:'/views/login/login'
		})
	}
	
	

</script>

<style lang="scss">
	.mine-page {
		width: 100vw;
		height: calc(100vh - 50px);
		background-color: azure;
		padding: 0 10px;
		box-sizing: border-box;
	}

	.header-msg {
		width: 100%;
		margin: 10px 0;
		padding: 5px;
		background-color: #fff;
		display: flex;
		align-items: center;
	}
	.img{
		width:120px;
		height: 80px;
	}
	.patient-msg {
		margin-left: 20px;
		width:100%;
		padding:0 10px;
		position: relative;
	}
	.setting{
		position: absolute;
		top:-20px;
		left: -10px;
		width:100%;
		font-size: 10px;
		margin-left: calc(100% - 28px);
	}
	.patient-msg>.nickname {
		font-weight: bold;
	}

	.patient-msg>.patient-manage {
		width: 70px;
		padding: 3px 10px;
		border-radius: 5px;
		margin-top: 10px;
		color: blue;
	}

	.f-row {
		display: flex;
		align-items: center;
	}

	.f-col {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.pantient-icon {
		margin-left: 5px;
	}

	.mine-order {
		background-color: #fff;
		width: 100%;
		box-sizing: border-box;
		border-radius: 10px;
		padding: 10px;
	}

	.order {
		width: 100%;
		display: flex;
		justify-content: space-between;
	}

	.order-wrap {
		margin-top: 20px;
		justify-content: space-between;
	}

	.guahao {
		background-color: #dcfcf3;
	}

	.all {
		width: 150px;
		height: 110px;
		display: flex;
		flex-direction: column;
		justify-content: space-evenly;
		align-items: center;
		border-radius: 20px;

	}

	.zixun {
		background-color: #cae9f7;
	}

	.order-img {
		width: 80px;
		height: 80px;
	}
</style>